<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ypxx</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>药品信息
                </h1>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-lg-12 column">

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">查询条件</h3>
                </div>
                <div class="panel-body">
                    <div class="col-lg-4">
                        <label class="form-inline">药品名称：
                            <input type="text" id="ypmc" class="form-control"/></label>
                    </div>
                    <div class="col-lg-4">
                        <label class="form-inline"/>处方药材：
                        <input type="text" id="cfyc" class="form-control"/></label>
                    </div>
                    <div class="col-lg-4">
                        <label class="form-inline"/>中间产品名称：
                        <input type="text" id="zjypmc" class="form-control"/></label>
                    </div>
                    <div class="col-lg-4">
                        <label class="form-inline"/>辅（原）料：
                        <input type="text" id="zjcf" class="form-control"/></label>
                    </div>
                    <div class="col-lg-4">
                        <label class="form-inline"/>剂型：
                        <input type="text" id="ypfl" class="form-control"/></label>
                    </div>

                </div>
                <div class="panel-footer" align="center">
                    <button type="submit" class="btn btn-default" onclick="query()">查询</button>
                    <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal">新增</button>
                    <input type="reset" class="btn btn-default"/>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">查询结果</h3>
                </div>
                <div class="panel-body" style="overflow-x: auto; overflow-y: auto; width:100%;">

                        <table class="table" >
                            <thead>
                            <tr>
                                <th width="100px">
                                    编号
                                </th>
								<th width="280px">
									药品名称
								</th>
								<th width="280px">
									中间产品名称
								</th>
								<th width="600px">
									处方药材
								</th>
								<th width="600px">
									辅（原）料
								</th>
								<th width="200px">
									剂型
								</th>

                                <th width="300px">
                                    现行标准依据
                                </th>
								<th width="600px">
									是否载入药典
								</th>
                            </tr>
                            </thead>
                            <tbody id="tableData">

                            </tbody>
                        </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增药品信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
							<span class="input-group-addon" style="width: 110px;">
								<div class="dropdown">
									<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                                            data-toggle="dropdown">药品剂型<span class="caret"></span></button>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('片剂')" tabindex="-1"
                                               href="#">片剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('注射剂')" tabindex="-1"
                                               href="#">注射剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('颗粒剂')" tabindex="-1"
                                               href="#">颗粒剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('胶囊剂')" tabindex="-1"
                                               href="#">胶囊剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('栓剂')" tabindex="-1"
                                               href="#">栓剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('丸剂')" tabindex="-1"
                                               href="#">丸剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('软膏剂')" tabindex="-1"
                                               href="#">软膏剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('气雾剂')" tabindex="-1"
                                               href="#">气雾剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('凝胶剂')" tabindex="-1"
                                               href="#">凝胶剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('散剂')" tabindex="-1"
                                               href="#">散剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('糖浆剂')" tabindex="-1"
                                               href="#">糖浆剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('搽剂')" tabindex="-1"
                                               href="#">搽剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('酊剂')" tabindex="-1"
                                               href="#">酊剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('贴膏剂')" tabindex="-1"
                                               href="#">贴膏剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('合剂')" tabindex="-1"
                                               href="#">合剂</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('提取物')" tabindex="-1"
                                               href="#">提取物</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('原料物')" tabindex="-1"
                                               href="#">原料物</a>
										</li>
									</ul>
                                    </ul>
								</div>
							</span>
                    <input type="text" readonly="readonly" class="form-control" style="width: 450px;height: 48px"
                           placeholder="选择药品剂型" id="dclasses">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">药品名称</span>
                    <input type="text" class="form-control" style="width: 450px" placeholder="输入药品名" id="dname">
                </div>
                <br>


                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">现行依据标准</span>
                    <input type="text" id="dgist" class="form-control" style="width: 450px" placeholder="输入现行依据标准">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">是否载入药典</span>
                    <input type="text" id="dfiag" class="form-control" style="width: 450px" placeholder="输入是否载入药典">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">中间产品名称</span>
                    <input type="text" id="mname" class="form-control" style="width: 450px" placeholder="输入中间产品名称">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">处方药材</span>
                    <input type="text" id="mediname" class="form-control" style="width: 450px" placeholder="输入处方药材">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">制剂处方</span>
                    <input type="text" id="preparations" style="width: 450px" class="form-control" placeholder="输入制剂处方">
                </div>
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="index_i()">
                    提交保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    function index_i() {
        let dclasses = $("#dclasses").val();
        let dname = $("#dname").val();
        let name = $("#dname").val();

        let dgist = $("#dgist").val();
        let dfiag = $("#dfiag").val();
        let mname = $("#mname").val();
        let mediname = $("#mediname").val();
        let preparations = $("#preparations").val();
        $.ajax({
            url: "index.do",
            data: {
                dclasses: dclasses,
                dname: dname,

                dgist: dgist,
                dfiag: dfiag,
                mname: mname,
                mediname: mediname,
                preparations: preparations,
                name:name
            },
            type: "get",
            dataType: "text",
            success:function (data) {
                   alert(data)
            },
            error:function () {
                   alert("网络错误 ！")
        }

        })
    }

    function query() {
        let ypmc = $("#ypmc").val();
        let cfyc = $("#cfyc").val();
        let zjypmc = $("#zjypmc").val();
        let zjcf = $("#zjcf").val();
        let ypfl = $("#ypfl").val();
        $.ajax({
            url: "query.do",
            data: {
                name: ypmc,
                mediname: cfyc,
                mname: zjypmc,
                preparations: zjcf,
                dclasses: ypfl
            },
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let html = "";
                let i = 0;
                if(data.length===0){
                	alert("没有数据");
				}else {
                	for(i;i<data.length;i++){
                		html+="<tr class=\"warning\">" +
								"<td>"+data[i].did+"</td>\n" +
								"<td>"+data[i].dname+"</td>\n" +
								"<td>"+data[i].mname+"</td>\n" +
								"<td>"+data[i].mediname+"</td>\n" +
								"<td>"+data[i].preparations+"</td>\n" +
								"<td>"+data[i].dclasses+"</td>\n" +
                                "<td>"+data[i].dgist+"</td>\n" +
								"<td>"+data[i].dfiag+"</td></tr>"
					}
				}
                $("#tableData").html(html);
            },
            error: function () {
                alert("网络错误 ！")
            }
        })
    }

    //修改药品类别新增的时候
    function alterAclasses(oo) {
        $("#dclasses").val(oo);
    }
</script>
</body>
</html>
